<template>
    <div>
      <div class="tree" style="float: left; width: 100%">
        <el-row>
          <el-col
            :span="25"
            style="overflow: auto; width: 100%; background-color: #ffffff"
            :style="{ height: heightTree }"
          >
            <el-tree
              ref="tree"
              :props="defaultProps"
              :load="loadNode"
              @node-click="itemClick"
              lazy
            >
              <span
                slot-scope="{ data }"
                class="custom-tree-node"
                :title="data.jgjc"
              >
                <span :dataType="data.jg_leixing">
                  <!-- <i :class="data.icon"/> -->
                  <svg-icon :icon-class="data.icon"></svg-icon>
                  {{ data.jgjc }}
                </span>
              </span>
            </el-tree>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  <script>
  import {
    getOrgTreeLazyHeader,
    getTreeLeafLazy,
  } from "@/api/students/organization/organization";
  import store from "@/store";
  
  export default {
    name: "Index",
    components: {},
    props: {},
    data() {
      return {
        heightY: window.innerHeight - 250 + "px",
        heightTree: window.innerHeight - 225 + "px",
        treeData: [],
        // 选中的树节点
        selectedNode: "",
        filterText: "",
        loading: false,
        flag: "1",
        defaultProps: {
          label: "jg_mingcheng",
          id: "jg_id",
          code: "jg_bianma",
          children: "children",
          parentId: "jg_shangji",
          type: "jg_leixing",
          icon: "icon",
          shortName: "jgjc",
          isLeaf: "leaf",
        },
        node_had: "",
        resolve_had: "",
      };
    },
    computed: {},
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
    },
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
      // init (flag) {
      //   this.treeData=[]
      //   this.loading = true
      //   const userInfo = JSON.parse(sessionStorage.getItem(`userInfo`))||{}
      //   const personJsons = {
      //     'userId': store.getters.user_id.toString(),
      //     'token': store.getters.token.toString(),
      //     'system': 'officedo',
      //     'isEnableEditOrg': userInfo.isEnableEditOrg.toString(),
      //     'is_show_org_inside': flag,
      //     'data': {}
      //   }
      //   getOrgTree(personJsons).then(response => {
      //     if (response.result) {
      //       this.treeData = response.resultdata;
      //     } else {
      //       this.$message.error(response.message)
      //     }
      //     this.loading = false
      //   }).catch(
      //     this.loading = false
      //   )
      // },
      requestNewData(flag) {
        if (flag) {
          this.flag = flag;
          this.treeData = [];
        }
        this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
        this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
      },
      loadNode(node, resolve) {
        this.loading = true;
        const userInfo = JSON.parse(sessionStorage.getItem(`userInfo`)) || {};
        if (node.level === 0) {
          this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
          this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起来
          const personJsons = {
            userId: store.getters.user_id.toString(),
            token: store.getters.token.toString(),
            system: "officedo",
            isEnableEditOrg: userInfo.isEnableEditOrg.toString(),
            is_show_org_inside: this.flag,
            data: {},
          };
          getOrgTreeLazyHeader(personJsons)
            .then((response) => {
              if (response.result) {
                return resolve(response.resultdata);
              } else {
                this.$message.error(response.message);
              }
              this.loading = false;
            })
            .catch((this.loading = false));
        }
        if (node.level > 0) {
          const params = {
            userId: store.getters.user_id.toString(),
            token: store.getters.token.toString(),
            system: "officedo",
            isEnableEditOrg: userInfo.isEnableEditOrg.toString(),
            is_show_org_inside: this.flag,
            data: {},
            jg_id: node.data.jg_id,
          };
          getTreeLeafLazy(params).then(function (result) {
            return resolve(result.resultdata);
          });
        }
      },
      itemClick(data) {
        if (data.icon == "folderopen_svg_128") {
          data.icon = "folder_svg_128";
        } else if (data.icon == "folder_svg_128") {
          data.icon = "folderopen_svg_128";
        }
        const node = {
          label: data.jg_mingcheng,
          id: data.jg_id,
          code: data.jg_bianma,
          children: [],
          parentId: data.jg_shangji,
          type: data.jg_leixing,
          icon: data.icon,
          shortName: data.jgjc,
        };
        this.selectedNode = node;
        this.showData();
      },
      showData() {
        this.$emit("init", this.selectedNode);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.jg_mingcheng.indexOf(value) !== -1;
      },
    },
  };
  </script>
  
  <style scoped>
  .el-tree .el-tree-node__expand-icon.expanded {
    transform: rotate(0deg);
  }
  .el-tree .el-icon-caret-right:before {
    content: "\e7a0";
    font-size: 15px;
  }
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: "\e7a2";
    font-size: 15px;
  }
  .el-tree span {
    font-size: 14px;
  }
  /deep/ .el-tree .el-tree-node.is-current > .el-tree-node__content {
    background-color: rgb(102, 177, 255);
  }
  .el-tree {
    /*min-width: 100%;*/
    width: 98%;
    display: inline-block !important;
  }
  </style>
  